<template>
	<view style="width: 100%" class="aaa">
		<view class="screen-bar" :style="{ height: height + 'rpx', backgroundColor: bgcolor }">
			<!--			'width':(100/titleArr.length)+'%',-->
			<view class="screen-bar-item" @tap.stop="itemClick(index)" v-for="(item, index) in updateArr" :key="index"
				:style="{
          fontSize: barFontSize + 'rpx',
          color: currentIndex == index && show ? activeColor : barTextColor,
        }">
				<view class="bar-item-text">
					{{ item }}
				</view>
				<image :src="arrBase64" :style="{
            transform: show
              ? currentIndex == index
                ? 'rotate(180deg)'
                : 'rotate(0)'
              : 'rotate(0)',
          }"></image>
			</view>
			<view style="width: 1rpx; background-color: #d0d0d0; content: ''"></view>
			<view class="screen-bar-item" @tap.stop="screen()"
				:style="{ fontSize: barFontSize + 'rpx', color: barTextColor }">
				<view class="bar-item-text"> 筛选 </view>
				<image src="@/static/images/home/screen.jpg"></image>
			</view>
			<!--			<slot class="screen-bar-item"></slot>-->
			<view class="dropdown-box" :style="{
          bottom: '-' + itemHeight * maxDropdownLength + 'rpx',
          height: itemHeight * maxDropdownLength + 'rpx',
          backgroundColor: bgcolor,
          opacity: show ? '1' : '0',
          display: show ? 'block' : 'none',
        }">
				<scroll-view scroll-y="true" style="height: 100%">
					<view class="dropdown-item" :style="{
              height: itemHeight + 'rpx',
              paddingLeft: itemPadding + 'rpx',
              fontSize: itemFontSize + 'rpx',
              color: itemTextColor,
            }" v-for="(item, index) in dropArr[currentIndex]" :key="index" @tap.stop="subItemClick(index)">
						{{ item[showTag] }}
					</view>
				</scroll-view>
			</view>
		</view>
		<!--		class="bg-mask"-->
		<view :class="[show ? 'bg-mask-show' : '']" @tap="maskClose" @touchmove="touchControl"></view>
	</view>
</template>

<script>
	/**
	 *  下拉组件
	 * @author xzj
	 * @create date 2021-4-3
	 * @update user xzj
	 * @update date 2021-4-3
	 * @note 遮罩层级98 筛选条&下拉层层级99
	 **/
	export default {
		data() {
			return {
				// 主条目选择序列
				currentIndex: 0,
				// 下拉条目序列
				currentSubIndex: 0,
				show: false,
				// 更新数组
				updateArr: [],
				// 结果数组
				resultArr: [],
				arrBase64: "",
			};
		},
		computed: {
			maxDropdownLength() {
				return this.dropArr[this.currentIndex].length > this.maxItemCount ?
					this.maxItemCount :
					this.dropArr[this.currentIndex].length;
			},
		},
		props: {
			// 筛选条高度 （rpx）
			height: {
				type: Number,
				default: 30,
			},
			// 下拉单项高度
			itemHeight: {
				type: Number,
				default: 88,
			},
			// 当前文字活跃颜色
			activeColor: {
				type: String,
				default: "#0377fc",
			},
			//背景颜色
			bgcolor: {
				type: String,
				default: "#fff",
			},
			//下拉标题数组
			titleArr: {
				type: Array,
				default: () => {
					return [];
				},
			},
			// item数量超过多少开始滚动
			maxItemCount: {
				type: Number,
				default: 6,
			},

			//下拉选项数组（二维数组）
			dropArr: {
				type: Array,
				default: () => {
					return [];
				},
			},
			// 选项左偏移
			itemPadding: {
				type: Number,
				default: 24,
			},
			// 能否遮罩关闭
			maskTouch: {
				type: Boolean,
				default: true,
			},
			// 是否需要选择后替换标题
			isNeedChangeTitle: {
				type: Boolean,
				default: true,
			},
			// 标题字号
			barFontSize: {
				type: Number,
				default: 26,
			},
			//标题颜色
			barTextColor: {
				type: String,
				default: "#A1A1A1",
			},
			//下拉字号
			itemFontSize: {
				type: Number,
				default: 26,
			},
			// 下拉文字颜色
			itemTextColor: {
				type: String,
				default: "#D0D0D0",
			},
			// 需要展示的字段，比如你的数据是item.name 这里填的就是name
			showTag: {
				type: String,
				default: "text",
			},
			// 是否要滑动关闭
			isTouchPrevent: {
				type: Boolean,
				default: true,
			},
			// 自定义事件的索引数组
			customIndexArr: {
				type: Array,
				default: () => {
					return [];
				},
			},
		},
		mounted() {
			// 设置更新数组与列表数组同长度
			this.updateArr = [...new Set(this.titleArr)];
			// 设置结果数组与列表数组同长度
			this.resultArr = new Array(this.titleArr.length).fill("");
		},
		methods: {
			screen() {
				this.$emit("screen");
			},
			itemClick(index) {
				if (this.customIndexArr.includes(index)) {
					this.show = false;
					this.$emit("customClick", {
						$index: index,
					});
					return;
				}
				if (this.currentIndex == index) {
					this.show = !this.show;
				} else {
					this.currentIndex = index;
					this.show = true;
				}
			},
			subItemClick(index) {
				this.currentSubIndex = index;
				if (this.isNeedChangeTitle) {
					this.updateArr.splice(
						this.currentIndex,
						1,
						this.dropArr[this.currentIndex][this.currentSubIndex][this.showTag]
					);
				}

				this.resultArr.splice(
					this.currentIndex,
					1,
					this.dropArr[this.currentIndex][this.currentSubIndex].value
				);

				this.$emit("finishDropClick", this.resultArr);
				this.show = false;
			},
			maskClose() {
				if (!this.maskTouch) return;
				this.show = false;
			},
			//
			touchControl() {
				if (this.isTouchPrevent) {
					this.maskClose();
				}
			},
		},
	};
</script>

<style>
	.aaa {
		/* margin-top: 28rpx; */
		display: flex;
		align-items: center;
		/* margin-bottom: 28rpx; */
		height: 86rpx;
	}

	.screen-bar {
		width: 100%;
		display: flex;
		position: relative;
		z-index: 9;
		/* margin-top: 24rpx; */
		display: flex;
		align-items: center;
	}

	//.screen-bar::after {
	//position: absolute;
	//content: '';
	//width: 100%;
	//height: 1rpx;
	//background-color: #EEEEEE;
	//bottom: -1rpx;
	//left: 0;
	//z-index: 99;
	//}

	.screen-bar-item {
		height: 100%;
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.screen-bar-item image {
		width: 24rpx;
		height: 24rpx;
		display: block;
		margin-left: 12rpx;
		transition: all 0.3s;
		flex-shrink: 0;
	}

	.dropdown-box {
		width: 100%;
		position: absolute;
		left: 0;
		z-index: 99;
		overflow: hidden;
	}

	.dropdown-item {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		//box-sizing: border-box;
		font-size: 26rpx;
		color: #111111;
		border-bottom: 1rpx solid #eeeeee;
	}

	.bg-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 98;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.bg-mask-show {
		visibility: visible;
		opacity: 1;
	}

	.bar-item-text {
		max-width: 120rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>